<template>
  <div>
    <a-modal
      :visible="visible"
      title="请使用抖音扫描二维码"
      :bodyStyle="{
        padding: '20px 60px',
      }"
      :width="400"
      :footer="null"
      @cancel="cancelClick"
      destroyOnClose
    >
      <img :src="imgeUrl" style="width: 23px; height: 230px" id="canvas_image" />
      <div style="text-align: center; padding-top: 10px">
        <a-button
          type="primary"
          style="background: #2878FF; border: none"
          @click="download"
          >点击下载二维码</a-button
        >
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "NewClip",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    imgeUrl: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
    });

    const download = () => {
      const image = document
        .getElementById("canvas_image")
        .toDataURL("image/png")
        .replace("image/png", "image/octet-stream");
      const a = document.createElement("a");
      a.download = `${name || "pic"}.png`;
      // 设置图片地址
      a.href = image;
      a.click();
    };

    const cancelClick = () => {
      emit("onCancel");
    };

    return {
      ...toRefs(state),
      cancelClick,
      download,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}
</style>
